<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>ECharts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.min.js"></script>

<script src="libs/jquery.min.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="libs/vue.min.js"></script>
<script src="libs/router.js"></script>
<script src="libs/bootstrap.min.js"></script>
<script src="libs/app.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</head>

<body>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="baseData" class="display:none">
		<div id="baseCount"></div>
		
		<div id="doctorUse" style="width: 900px; height: 400px;"></div>
		<div id="reportCount" style="width: 900px; height: 400px;"></div>
	</div>
	<div id="doctorData" class="display:none">
		<!-- 医院医生数量 改为列表 -->
		<div class='panel-heading'><b>医院使用人数</b></div>  
	<div  align="center"  style="width: 900px; ">	<table id="hospitalDoctor"></table></div>
		<!-- 每日医生数量 -->
		<div id="dayDoctor" style="width: 900px; height: 400px;"></div>
		<!-- 省市医生分布 -->
		<div id="provinceDoctor" style="width: 900px; height: 400px;"></div>
		<!-- 医生名下患者 改为列表 -->
		<div class='panel-heading' ><b>医生使用人数</b></div>  
		<div align="center"  style="width: 900px;" ><table id="doctorPatient"></table></div>
		<!-- 省市患者分布 -->
		<div id="provincePatient" style="width: 900px; height: 400px;"></div>
		
	</div>

	<div id="patientData" class="display:none">
		<!-- 分享数 -->
		<div id="shareCount" ></div>
		<!-- 患者数 -->
		<div id="allPaientCount"  style="width: 900px; height: 400px;" ></div>
		
	</div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
	
		  showData(2); 

		function showData(index) {
			switch (index) {
			case 1:
				var data = getData("AdminDataReport/getDashBard", index);
				break;
			case 2:
				var data = getData("AdminDataReport/getDoctorData", index);
				break;
			case 3:
				var data = getData("AdminDataReport/getPatientData", index);
				break;
			}
		}
		function getData(url, index) {
			$.ajax({
				type : "GET",
				async : false,
				headers : {
					'Access-Control-Allow-Origin' : '*'
				},
				url : baseURL + url,
				dataType : "json",
				success : function(r) {
					if (r.code == 0) {
						var data = r.data;
						buildData(data, index);
					} else {
						layer.alert(r.msg);
					}
				}
			});
		}
		function buildData(data, index) {
			switch (index) {
			case 1:
				$("#doctorData").hide();
				$("#patientData").hide();
				var myChart1 = echarts.init(document.getElementById('doctorUse'));
				var myChart2 = echarts.init(document.getElementById('reportCount'));
				
				var option1 = data.doctorUseCount;
				myChart1.setOption(option1);
				var option2 = data.reportCount;
				myChart2.setOption(option2);
				$("#baseCount").html(
						"<ul>医生总数：" + data.doctorCount + "</ul><ul> 患者总数："
								+ data.patientCount + "</ul><ul> 报告分享次数："
								+ data.shareCount +"</ul>");
				$("#baseData").show();

				break;
			case 2:
				$("#baseData").hide();
				$("#patientData").hide();
				var dayDoctorChart =  echarts.init(document.getElementById('dayDoctor'));
				var provinceDoctorChart = echarts.init(document.getElementById('provinceDoctor'));
				var provincePatientChart = echarts.init(document.getElementById('provincePatient'));
				var hospitalDoctorChart = echarts.init(document.getElementById('hospitalDoctor'));
			        dayDoctorChart.setOption( data.doctorCount);
					provinceDoctorChart.setOption(data.cityDoctorCount);
					provincePatientChart.setOption(data.provincePatientCount);
					var str = "<div class='panel-heading'><b>医院使用人数</b></div>  <table  border='1' bordercolor=''#a0c6e5' style='border-collapse:collapse;'><tr ><td>医院名称</td><td>医生数量</td></tr>";
					for(var i = 0; i< data.hospitalUseCount.length; i++){
						str+= "<tr><td>"+data.hospitalUseCount[i].dayNO+"</td> <td>"+data.hospitalUseCount[i].dataCount+"</td></tr>";
					}
					str+="</table>";
					$("#hospitalDoctor").html(str);
				$("#doctorData").show();
				break;

			case 3:
				$("#baseData").hide();
				$("#doctorData").hide();
				var allPaientCountChart =  echarts.init(document.getElementById('allPaientCount'));
				allPaientCountChart.setOption(data.patientUseCount);
				var shareCount = data.reportShareCount;
				var str = "<div class='panel-heading'><b>每日分享次数</b></div> ";
				for(var i = 0; i< shareCount.length; i++){
					str+= "<ul>患者名称："+shareCount[i].dayNO+" 分享次数："+shareCount[i].dataCount+"</ul>";
				}
				$("#shareCount").html(str);
				
				$("#patientData").show();
				break;
			}

		}
		
		$(function () {
		    $("#hospitalDoctor").jqGrid({
		        url: baseURL + 'AdminDataReport/getDoctorCount',
		        datatype: "json",
		        colModel: [			
					{ label: '医院名称', name: 'dayNO', index: 'dayNO', width: 80 },	
					{ label: '医生数量', name: 'dataCount', index: 'dataCount', width: 50, key: true }
		        ],
				viewrecords: true,
		        height: 385,
		        rowNum: 100,
				rowList : [10,30,50],
		        rownumWidth: 100, 
		        autowidth: false,
		        width:900,
		        multiselect: false,
		        jsonReader : {
		            root: "data",
		        },
		    });
		    
		    
		    $("#doctorPatient").jqGrid({
		        url: baseURL + 'AdminDataReport/getPatientCount',
		        datatype: "json",
		        colModel: [			
		        	{ label: '医生姓名', name: 'dayNO', index: 'dayNO', width: 80 },	
					{ label: '患者数量', name: 'dataCount', index: 'dataCount', width: 50, key: true }	
		        ],
				viewrecords: true,
		        height: 385,
		        rowNum: 100,
				rowList : [10,30,50],
		        rownumWidth: 100, 
		        width:1000,
		        autowidth:false,
		        multiselect: false,
		        jsonReader : {
		            root: "data",
		        }
		    });
		});
	</script>
</body>

</html>